<template>

	<view class="content">

		<image class="shujia" src="../../../static/书架.jpg" mode="aspectFill">

			<view class="l-view l-view-not-border">
				<view class="l-h3">
					<text class="l-h3-title">全部分类</text>
				</view>

				<view class="l-list-classify">
					<navigator url="../../../pagesbookself/pages/index/index1/index1" open-type="navigate">
						<view class="uni-link-item">
							<view class="l-list-item">
								<view class="l-item_view">
									<view class="l-item__value">
										<view class="l-item__value-title">
											课本
										</view>
										<view class="l-item__value-sub">
											13本
										</view>
									</view>
									<image class="l-img-classify" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-82cc103b-1cae-4d54-8b38-3547a370066f/87ce4641-8378-48f4-b68a-fb75d31f2bf5.jpg" mode="aspectFill">
								</view>
							</view>
						</view>
					</navigator>
					<navigator url="../../../pagesbookself/pages/index/index2/index2" open-type="navigate">
						<view class="uni-link-item">
							<view class="l-list-item">
								<view class="l-item_view">
									<view class="l-item__value">
										<view class="l-item__value-title">
											课外书籍
										</view>
										<view class="l-item__value-sub">
											12本
										</view>
									</view>
									<image class="l-img-classify" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-82cc103b-1cae-4d54-8b38-3547a370066f/6c5e814b-9764-42f0-9007-d1764aac1f5d.png" mode="aspectFill">
									</image>
								</view>
							</view>
						</view>
					</navigator>

					<navigator url="../../../pagesbookself/pages/index/index4/index4" open-type="navigate">
						<view class="uni-link-item">
							<view class="l-list-item">
								<view class="l-item_view">
									<view class="l-item__value">
										<view class="l-item__value-title">
											考研书籍

										</view>
										<view class="l-item__value-sub">
											11本
										</view>
									</view>
									<image class="l-img-classify" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-82cc103b-1cae-4d54-8b38-3547a370066f/f189a828-e601-46f2-8964-ec7f58e04f3e.png" mode="aspectFill">
									</image>
								</view>
							</view>
						</view>
					</navigator>
					<navigator url="../../../pagesbookself/pages/index/index5/index5" open-type="navigate">
						<view class="uni-link-item">
							<view class="l-list-item">
								<view class="l-item_view">
									<view class="l-item__value">
										<view class="l-item__value-title">
											资讯
										</view>
										<view class="l-item__value-sub">
											9条
										</view>
									</view>
									<image class="l-img-classify" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-82cc103b-1cae-4d54-8b38-3547a370066f/8173e111-99f6-4154-8c0e-1d9c2cf975cb.jpg" mode="aspectFill">
									</image>
								</view>
							</view>
						</view>
					</navigator>
				</view>
			</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

				img: `../../static/t01be0535da266d2078.png`,
				img1: `../../static/t01d62203d40685e554.jpg`,
				img2: `../../static/a4b0736000bfa36365f2fccd0fbcd3c3c42c31db9e212a23.WEBP`,
				img3: `../../static/ab6423693aa28882c1c325ad1b3ed7803420595eac3828c6.WEBP`,

			}
		}

	}
</script>

<style>
	/* l-body-tab */
	page,
	uni-page {
		background-color: var(--c-bg-3);
		color: var(--c-txt-1);
		font-size: var(--f-size-2);

		/* font-size */
		--f-size-1: 24rpx;
		--f-size-2: 28rpx;
		--f-size-3: 32rpx;
		--f-size-4: 36rpx;
		--f-size-5: 40rpx;
		--f-size-6: 44rpx;

		/* color | background */
		--c-txt-1: #FFFFFF;
		--c-txt-2: #95A1A6;
		--c-txt-3: #cdced0;

		--c-bg-1: #000000;
		--c-bg-2: #7E7F94;
		--c-bg-3: #0b0c21;

		/*--c-bg-2:#7E7F94;
		
		/* padding-left | right */
		--pad-lr: 32rpx;

		/* navbar-height */
		--h-head: 96rpx;

		/* input placeholder text color */
		--c-input-holder: #696a7f;


	}

	page {
		background-color: #F5F5F5;
	}


	.l-body-tab {
		display: flex;
		margin: 20rpx 0 0;
		align-items: center;
		white-space: nowrap;
		justify-content: space-around;
	}

	.l-tab-item-img {
		margin-bottom: 10rpx;
	}

	.l-tab-item-img-3,
	.l-tab-item-img-1 {
		width: 60rpx;
		height: 58rpx;
	}

	.l-tab-item-img-2 {
		width: 52rpx;
		height: 56rpx;
	}

	.l-tab-item-img-4 {
		width: 54rpx;
		height: 54rpx;
	}

	.l-tab-item-value {
		text-align: center;
		font-size: 26rpx;
		color: var(--c-txt-2);
	}

	/* l-view */

	.l-view {
		padding: 40rpx var(--pad-lr);
		border-bottom: 1rpx solid #222337;
	}

	.l-view-not-border {
		padding-bottom: 0;
		border-bottom: none;
	}

	.l-h3 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.l-h3-title {
		font: bold var(--f-size-5) normal;
		color: #000000;
	}

	.l-h9 {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.l-h3-more {
		display: flex;
		align-items: center;
		color: var(--c-bg-2);
	}

	.l-icon-refresh {
		width: 33rpx;
		height: 25rpx;
		margin-left: 12rpx;
	}

	.l-icon-dot {
		width: 30rpx;
		margin-top: 10rpx;
	}

	.l-dl {
		margin-top: 32rpx;
		display: flex;
		width: 100%;
		height: 224rpx;
	}

	.l-dt {
		width: 160rpx;
		height: 100%;
		border-radius: 10rpx;
		margin-right: 24rpx;
	}

	.l-dd {
		width: 70%;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.l-dd-title {
		color: var(--c-txt-3);
		font: var(--f-size-3) normal;
	}

	.l-dd-content,
	.l-dd-footer {
		color: var(--c-txt-2);
		font: var(--f-size-2)/var(--f-size-4) normal;
	}

	.l-dd-view-footer,
	.l-dd-content {
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.l-dd-view-footer {
		color: #868DAB;
		font-size: var(--f-size-1);
		-webkit-line-clamp: 2;
	}

	.l-dd-content {
		-webkit-line-clamp: 3;
	}

	.l-dd-footer {
		display: flex;
		align-items: center;
	}

	.l-dd-img {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 6rpx;
	}


	/* l-dl-view */

	.l-dl-view {
		position: relative;
		height: 282rpx;
		margin-top: 32rpx;
	}

	.l-dl-bg {
		height: 250rpx;
		background: rgba(34, 35, 55, 1);
		box-shadow: 0px 30px 60px 0px rgba(17, 21, 26, 0.1);
		border-radius: 20rpx;
		position: absolute;
		/* top: 32rpx; */
		left: 0;
		width: 100%;
	}

	.l-dl-content {
		position: relative;
		z-index: 1;
		display: flex;
		padding: 0 rpx;
	}

	.l-dt-view {
		width: 168rpx;
		height: 250rpx;
		border-radius: 10rpx;
		margin-right: 30rpx;
	}

	.l-dd-view {
		width: calc(100% - 198rpx);
		padding: 10rpx 10rpx 10rpx 0rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.l-dd-view-content {
		display: flex;
		justify-content: space-between;
	}

	.l-dd-view-title {
		width: calc(100% - 62rpx);
		border-bottom: 1rpx solid #5D637C;
	}

	.l-dd-view-ta,
	.l-dd-view-tb {
		width: 100%;
		overflow: hidden;
		white-space: normal;
		text-overflow: ellipsis;
	}

	.l-dd-view-ta {
		font: bold var(--f-size-3) normal;
	}

	.l-dd-view-tb {
		color: #5D637C;
		padding: 14rpx 0 25rpx;
		font-size: var(--f-size-1);
	}

	/* l-classify */

	.l-list-classify {
		padding: 35rpx 0 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.l-list-item {
		width: 330rpx;
		height: 165rpx;
		background-color: #ffffff;
		/*background: linear-gradient(to right,#FFFAF0,#ffffff);*/
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.l-list-item1 {
		width: 750rpx;
		height: 100rpx;
		/*background-color: #F5F7F9;*/
		background: linear-gradient(to right, #18BC37, #7fd02b);

		margin-bottom: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.l-item_view {
		width: calc(100% - 64rpx);
		height: 122rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.l-item__value-title {
		font-size: var(--f-size-2);
		color: #2B3133;
		margin-bottom: 12rpx;
	}

	.l-item__value-sub {
		font-size: var(--f-size-1);
		color: #95A1A6;
	}

	.l-img-classify {

		width: 40%;
		height: 100%;
	}

	.shujia {
		margin-top: 10px;
	}
</style>
